<template>
	<appVue>
		<template #sectionContent>
			<div id="newesDetail">
				<!-- <slot name='choice'></slot> -->
				<!-- <slot name='nav' sss="123"></slot> -->
				<!-- <div class="navigation"><myheader></myheader></div> -->
				<routerNav class="routerNavBox" :router="router" :isNoShowImg="true"></routerNav>
				<div class="content">
					<div class="contentLeft">
						<h1 class="title">{{ contentDetail.title }}</h1>
						<div class="comeInfo">
							<span class="infos">时间：{{ contentDetail.publishTime }}</span>
							<span class="infos">来源：今日头条</span>
							<span class="infos">作者：本站编辑</span>
							<span class="infos">阅读：{{ setNumber(contentDetail.views || 0) }}</span>
						</div>
						<div class="ueditor">
							<div class="restore_zan_comment">
								<span class="span zan" @click="contentLikes">
									<span class="zan_shadow"><i :class="liked ? 'liked iconfont icon-Thumbs-up' : 'iconfont icon-Thumbs-up'"></i></span>
									<span>{{ setNumber(contentDetail.likes || '点赞') }}</span>
								</span>
								<span class="span"><span class="split"></span></span>
								<!-- <span class="span store">
									<i class="iconfont icon-Star"></i>
									<span>收藏</span>
								</span>
								<span class="span share">
									<i class="iconfont icon-Share-two"></i>
									<span>分享</span>
								</span> -->
							</div>
							<div class="ueditor_content">
								<div class="news_title" v-if="contentDetail.summary">
								  <!-- <span class="summary">{{ contentDetail.summary }}</span> -->
									<div class="summary" v-html="contentDetail.summary"></div>
								</div>
								<div class="new_content" v-html="UeditContent"></div>
							</div>
						</div>
						<div class="prev_next">
							<a class="prev" :href="constentprevList.id ? Path + constentprevList.url : 'javascript:;'">
								<span class="prev_button" :class="constentprevList.id ? 'prev_button_has' : 'prev_button_has_no'"><i class="iconfont icon-a-Leftarrow"></i></span>
								<span class="contentTitle">上一篇：{{ constentprevList.id ? constentprevList.title : '没有了' }}</span>
							</a>
							<a class="next" :href="constentNextList.id ? Path + constentNextList.url : 'javascript:;'">
								<span class="contentTitle">下一篇：{{ constentNextList.id ? constentNextList.title : '没有了' }}</span>
								<span class="next_button" :class="constentNextList.id ? 'next_button_has ' : 'next_button_has_no'"><i class="iconfont icon-a-Rightarrow"></i></span>
							</a>
						</div>
					</div>
					<div class="contentRight">
						<!-- <reCommend :titleObj="titleObj"></reCommend> -->
						<div class="hotSort"><hotSort :titleObj="titleObj_list"></hotSort></div>
					</div>
				</div>
				<div class="commentContanier" id='commentContanier'>
					<div class="comment_content"><comment></comment></div>
				</div>

				<div class="moreRecommond" v-if="contentList.length">
					<h2 class="relativeRecommond">相关推荐</h2>
					<moreNewsList :contentList="contentList" />
				</div>
			</div>
			<!-- 	<div>
	</div> -->
		</template>
	</appVue>
</template>

<script>
import { defineAsyncComponent } from 'vue';
// import myheader from '../components/header/header.vue';
// import navs from '../components/newsChannel/nav.vue';
// import newsList from '../components/newsChannel/newsList.vue';
// import reCommend from '../components/newsChannel/reCommend.vue';
// import hotSort from '../components/newsChannel/hotSort.vue';
// import moreNewsList from '../components/newsChannel/moreNewsList.vue'
// import comment from '../components/comment/comment.vue';
// import contact from '../components/footer/contact.vue';
// import information from '../components/footer/information.vue';
export default {
  components: {
		appVue:defineAsyncComponent(() => import(rootPath+'/src/app.vue')),
    myheader:defineAsyncComponent(() => import(rootPath+'/src/components/header/header.vue')),
    navs:defineAsyncComponent(() => import(rootPath+'/src/components/newsChannel/nav.vue')),
		routerNav: defineAsyncComponent(() => import(rootPath + '/src/components/detailRouter/routerNav.vue')),
    newsList:defineAsyncComponent(() => import(rootPath+'/src/components/newsChannel/newsList.vue')),
		reCommend:defineAsyncComponent(() => import(rootPath+'/src/components/newsChannel/reCommend.vue')),
		hotSort:defineAsyncComponent(() => import(rootPath+'/src/components/newsChannel/hotSort.vue')),
		moreNewsList:defineAsyncComponent(() => import(rootPath+'/src/components/newsChannel/moreNewsList.vue')),
		comment:defineAsyncComponent(() => import(rootPath+'/src/components/comment/comment.vue')),
  },
	data(){
		return{
			titleObj:{
				'title':'推荐阅读',
				'title_icon':'icon-Refresh-one',
				'actionName':'换一换'
			},
			titleObj_list:{
				'title':'热点排行',
				'title_icon':'icon-Refresh-one',
				'actionName':'换一换'
			},
			contentList:[],//相关推荐列表
			contentDetail:{},
			UeditContent:'',
			titleContent:'',
			query:GetQueryString(),
			router:'',
			constentprevList:{},
			constentNextList:{},
			Path:getRootPath(),
      liked:0,
		}
	},
	mounted(){
		//SEO(this.query);
		this.isUp();
		this.getContentDetail();
		this.getContentOfChannel();
		this.commentSetUp();
    this.contentNext();
	},
	methods:{
      setNumber(val){
      	let value = val;
      	if(value>=1000){
      		value = value/1000+'K';
      	}else if(value>=10000){
      		value = value/1000+'W';
      	}
      	return value
      },
			isUp(){ // 是否点赞过
			let query = GetQueryString();
			let param = {
				contentId:query.id,
			};
				contentApi.isUp(param, res => {
					if (res.code == '00000 00000') {
						this.liked = res.data;
					}
				})
			},
			getContentDetail(){
				let query = GetQueryString();
				let param = {
					id:query.id,
				};
				contentApi.getContentDetail(param, res => {
					if (res.code == '00000 00000') {
						this.contentDetail = res.data;
						this.router = res.data.frontChannelLevelVos;
						let obj =  res.data.instance?.instanceItems.filter((item)=>item.field == 'contents')[0] || {};
						this.UeditContent =obj.value['正文'];
						let titleObj = res.data.instance?.instanceItems.filter((item)=>item.field == 'title')[0] || {};
						this.titleContent = titleObj.value;
						let summary = res.data.instance?.instanceItems.filter((item)=>item.field == 'summary')[0] || {};
						this.contentDetail.summary = summary.value;
					} else {
					}
				});
			},
			contentLikes(){
				let query = GetQueryString();
				let param = {
					id:query.id,
				};
				contentApi.[this.liked ==0? 'contentLikes':'contentUnLikes'](param, res => {
					if (res.code == '00000 00000') {
						this.liked = !this.liked;
						this.getContentDetail();
					} else {
					}
				});
			},
			getContentOfChannel() {
				let param = {
					contentId:this.query.id,
					orderBy:3,
				};
				contentApi.getRelationContentList(param, res => {
					if (res.code == '00000 00000') {
						this.contentList = res.data;
					} else {
					}
				});
			},
			contentNext() {
				[false, true].forEach((item, index) => {
					contentApi.contentNext({ contentId: this.query.id, isNext: item }, res => {
						if (res.code == '00000 00000') {
							if (res.data) {
								if (!item) {
									this.constentprevList.id = res.data.id;
									this.constentprevList.url = res.data.url;
									this.constentprevList.title= res.data.title;
								} else {
									this.constentNextList.id = res.data.id;
									this.constentNextList.url = res.data.url;
									this.constentNextList.title= res.data.title;
								}
							}
						}
					});
				});
			},
			commentSetUp(){
				contentApi.commentSetUp({}, res => {
					if (res.code == '00000 00000') {
						sessionStorage.commentAllowedLink = res.data.commentAllowedLink;
						sessionStorage.commentSet = res.data.commentSet;  //1 评论不限制，2 登陆后评论，3 不允许评论；
					} else {
					}
				});
			},
		goComment(){
			console.log(12)
			let ele = document.querySelector('#commentContanier');
			ele.scrollIntoView({
        behavior: 'smooth',
        block: 'end'
      });
		}
	}
}
</script>

<style>
#newesDetail {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 134px;
}
#newesDetail .navigation {
	width: 100%;
}
#newesDetail .content {
	/* width: 100%; */
	background-color: #fff;
	display: flex;
	justify-content: center;
	width: 1200px;
}
#newesDetail .content .contentLeft {
	width: 840px;
}
#newesDetail .content .contentLeft .title {
	font-size: 40px;
	font-family: PingFang SC-Semibold, PingFang SC;
	font-weight: 600;
	color: #333333;
	line-height: 48px;
	margin-bottom: 24px;
}
#newesDetail .content .contentLeft .comeInfo {
	font-size: 14px;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #999999;
	line-height: 14px;
}
#newesDetail .content .contentLeft .comeInfo .infos {
	margin-right: 40px;
}
#newesDetail .content .contentRight {
	width: 320px;
	margin-left: 40px;
	display: flex;
	flex-direction: column;
	height: 300px;
}
/* #newesDetail .content .contentRight .hotSort {
  margin-top: 36px;
} */
#newesDetail .hotspot {
	margin-left: 40px;
}
#newesDetail .moreRecommond {
	width: 1200px;
	margin-top: 60px;
}
#newesDetail .moreRecommond .relativeRecommond {
	font-size: 24px;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #333333;
	line-height: 24px;
	margin-bottom: 24px;
	width: 100%;
}
#newesDetail .moreRecommond .newsList {
	width: 840px;
}
#newesDetail .commentContanier {
	width: 1200px;
}
#newesDetail .commentContanier .comment_content {
	margin-left: 104px;
	width: 736px;
}
#newesDetail .commentContanier .comment_content .comment_num {
	font-size: 24px;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #333333;
	line-height: 24px;
	margin-bottom: 24px;
	margin-top: 80px;
}
#newesDetail .routerNavBox {
	width: 1200px;
	padding: 0;
	padding-bottom: 40px;
	background-color: #fff;
	line-height: 14px;
}
.ueditor {
	display: flex;
	margin-top: 40px;
}
.ueditor_content {
	flex: 1;
	min-height: 300px;
	overflow: auto;
}
.ueditor_content img {
	max-width: 100% !important;
}
.ueditor_content p {
	max-width: 100%;
}
.news_title {
	font-size: 16px;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #333333;
	line-height: 24px;
	padding: 22px 86px;
	background-color: #f8f8f8;
	margin-bottom: 30px;
	background-image: url(/u/cms/www/2023/08/24/1694672500232871938.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.summary{
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}
.new_content {
	min-height: 400px;
	height: 100%;
	overflow: auto;
}
.restore_zan_comment {
	width: 48px;
	margin-right: 56px;
	display: flex;
	flex-direction: column;
}
.restore_zan_comment .span {
	font-size: 12px;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #333333;
	line-height: 12px;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 20px;
}
.restore_zan_comment .span .iconfont {
	font-size: 24px;
	color: #333;
	margin-bottom: 8px;
	cursor: pointer;
	line-height: 24px;
}
.restore_zan_comment .span .icon-Thumbs-up {
	margin-bottom: 0;
}
.restore_zan_comment .span .zan_shadow {
	width: 48px;
	height: 48px;
	border-radius: 48px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #f8f8f8;
	margin-bottom: 8px;
}
.restore_zan_comment .span .liked {
	color: #ff3333;
}
.restore_zan_comment .split {
	height: 1px;
	background: #efefef;
	width: 24px;
}
#newesDetail .prev_next {
	width: calc(100% - 94px);
	display: flex;
	justify-content: space-between;
	margin-top: 80px;
	margin-left: 94px;
}
#newesDetail .prev_next .contentTitle {
	font-size: 14px;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #333333;
	max-width: 276px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.prev_next .prev,
.prev_next .next {
	display: flex;
	align-items: center;
	cursor: pointer;
}

.prev_next .prev_button,
.prev_next .next_button {
	width: 22px;
	height: 22px;
	background: #000000;
	border-radius: 100%;
	opacity: 1;
	color: #fff;
	text-align: center;
	line-height: 22px;
	display: inline-block;
}
.prev_next .prev_button_has:hover,
.prev_next .next_button_has:hover {
	background-color: #ff3333;
}
.prev_next .prev_button_has_no,
.prev_next .next_button_has_no {
	background-color: #cccccc;
}
.prev_next .prev_button {
	margin-right: 13px;
}
.prev_next .next_button {
	margin-left: 13px;
}
</style>
<style>
.mhover:hover {
	color: #ff3333 !important;
	cursor: pointer;
}
</style>
